var H = AjaxStack.Html;

YAHOO.namespace("ajaxstack");
YAHOO.ajaxstack.HtmlTests = new YAHOO.tool.TestCase({

	name: "Html Tests",

	//--------------------------------------------- 
	// Setup and tear down 
	//---------------------------------------------

	setUp: function()
	{
	},

	tearDown: function()
	{
	},

	//--------------------------------------------- 
	// Tests 
	//---------------------------------------------

	testTag: function()
	{
		Assert.areEqual('<anyTag anyAttr="attrVal"/>', H.tag("anyTag", { anyAttr: 'attrVal' }));

		Assert.areEqual('<anyTag attr1="val1" attr2="val2" attr3="val3"/>',
			H.tag("anyTag", { attr1: 'val1', attr2: 'val2', attr3: 'val3' }));

		Assert.areEqual('<anyTag>tag body</anyTag>', H.tag("anyTag", "tag body"));

		Assert.areEqual('<anyTag attr1="val1" attr2="val2">tag body</anyTag>',
			H.tag("anyTag", { attr1: 'val1', attr2: 'val2' }, "tag body"));
	},

	testInputTags: function()
	{
		Assert.areEqual('<input value="text value" type="text"/>', H.inputText({ value: "text value" }));
		Assert.areEqual('<input checked="checked" type="checkbox"/>', H.inputCheckbox({ checked: "checked" }));
		Assert.areEqual('<textarea>text value</textarea>', H.textArea({ value: "text value" }));
	},

	testHtmlTags: function()
	{
		Assert.areEqual('<div attr="val">body</div>', H.div({ attr: "val" }, "body"));
		Assert.areEqual('<span attr="val">body</span>', H.span({ attr: "val" }, "body"));
		Assert.areEqual('<label attr="val">body</label>', H.label({ attr: "val" }, "body"));
		Assert.areEqual('<a attr="val">body</a>', H.a({ attr: "val" }, "body"));
		Assert.areEqual('<b attr="val">body</b>', H.b({ attr: "val" }, "body"));
		Assert.areEqual('<i attr="val">body</i>', H.i({ attr: "val" }, "body"));
		Assert.areEqual('<em attr="val">body</em>', H.em({ attr: "val" }, "body"));
		Assert.areEqual('<code attr="val">body</code>', H.code({ attr: "val" }, "body"));
		Assert.areEqual('<pre attr="val">body</pre>', H.pre({ attr: "val" }, "body"));
		Assert.areEqual('<br/>', H.br());
		Assert.areEqual('<h1>heading</h1>', H.h1("heading"));
		Assert.areEqual('<h2>heading</h2>', H.h2("heading"));
		Assert.areEqual('<h3>heading</h3>', H.h3("heading"));
		Assert.areEqual('<h4>heading</h4>', H.h4("heading"));
		Assert.areEqual('<h5>heading</h5>', H.h5("heading"));
		Assert.areEqual('<h6>heading</h6>', H.h6("heading"));

		Assert.areEqual('<img align="left" alt="alt text" src="img/test.jpg"/>',
			H.img({ align: 'left', alt: 'alt text', src: 'img/test.jpg' }));

		Assert.areEqual('<p attr="val"><div attr="val">body</div></p>',
			H.p({ attr: "val" }, H.div({ attr: "val" }, "body")));

		Assert.areEqual('<ul attr="val"><li attr="val">body1</li><li attr="val">body2</li></ul>',
			H.ul({ attr: "val" },
				H.li({ attr: "val" }, "body1")
				+ H.li({ attr: "val" }, "body2")
			));
	},

	testDataSource: function()
	{
		Assert.areEqual('<div attr="val">body<b>before</b><br/><b>after</b></div>',
			H.div({ attr: "val", dataSource: [H.b("before"), H.br(), H.b("after")] }, "body"));

		Assert.areEqual('<div attr="val">body<b>foo</b><b>bar</b></div>',
			H.div({
				attr: "val",
				dataSource: ["foo", "bar"],
				onItemDataBound: function(e)
				{
					return H.b(e);
				}
			}, "body"));
	}

});

